<template>
    <div class="rootContainer">
      <div class="headerContainer">
        <el-page-header @back="goBack" content="切换导入数据表" style="float: left;"></el-page-header>
        <div style="float: right;margin-right: 40px">
          <span class="importNumTip">当前文件已经导入次数：</span><span class="importNumTip" style="margin-right: 20px;color: #FF0000;">{{importNum}}</span>
          <el-button type="success" @click="importData" :disabled="hasImportExcel" round> 导  入 </el-button>
        </div>
      </div>
      <div class="fieldContainer">
        <el-form
          ref="filedForm"
          label-width="250px"
        >
          <el-form-item
            label="加载excel文件："
          >
            <el-upload
              class="upload-demo"
              ref="uploadExcel"
              :action="serverUrl + '/e2d/initExcel'"
              multiple
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :file-list="fileList">
              <el-button size="small" type="primary">点击加载</el-button>
            </el-upload>
          </el-form-item>
          <el-form-item
            label="工作簿选择"
          >
            <el-select v-model="sheetName" placeholder="请选择" class="inputBox" @change="changeSheet" :disabled="hasImportExcel">
              <el-option
                v-for="item in sheetList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            v-for="item in fieldList"
            :label="item.field+'：'"
            :key="item.field"
          >
            <el-tooltip class="item" effect="light" :content="item.remark" placement="right-start">
              <el-select v-model="item.title" placeholder="请选择" class="inputBox" :clearable=true :disabled="hasImportExcel">
                <el-option
                  v-for="item in titleList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-tooltip>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
    import {get, post} from "../../utils/httpUtil";
    import commonParam from '../../utils/common'

    export default {
      name: "DBExcel"
      ,data() {
        return {
          currentSheet: ''
          ,serverUrl: commonParam.serverUrl
          ,fieldList: []
          ,sheetList:[]
          ,titleListMap: {}
          ,sheetName: {}
          ,titleList: []
          ,hasImportExcel: true
          ,fileList:[]
          ,tableName: ""
          ,importNum: 0
          ,excelTableListUrl: 'excelTableList'
        }
      }
      ,methods: {
        goBack() {
          this.$router.push(this.excelTableListUrl)
        }
        ,initFieldData() {
          this.hasImportExcel = true;
          this.fileList.splice(0, this.fileList.length)
          get("/db/getFieldList", {tableName:this.tableName}).then(response => {
            if (response.data.result) {
              this.fieldList = response.data.data
            } else {
              this.$message({
                message: '获取字段列表失败！',
                type: 'error'
              });
            }
          })
        }
        ,beforeAvatarUpload(file) {
          let isExcel = (file.type == 'application/vnd.ms-excel')
          if (!isExcel) {
            this.$message({
              message: '只能上传excel文件！',
              type: 'error'
            });
          }
          return isExcel
        }
        ,handleAvatarSuccess(res, file) {
          if (res.result) {
            this.titleListMap = res.data.titleListMap
            this.sheetList = res.data.sheetList
            if (this.sheetList.length>0) {
              this.sheetName = this.sheetList[0]['label']
              this.titleList = this.titleListMap[this.sheetList[0]['value']]
            }
            this.hasImportExcel = false
            this.$notify.success({
              title: '提示',
              message: 'excel加载成功！'
            });
            this.importNum = 0
          } else {
            this.$notify.error({
              title: 'excel加载失败',
              message: res.msg
            });
          }
        }
        ,changeSheet() {
          this.titleList = this.titleListMap[this.sheetName]
        }
        ,importData() {
          let importParam = {}
          importParam.sheetName = this.sheetName
          importParam.titleList = this.getTitleList()
          importParam.tableName = this.tableName
          post('/e2d/importData', importParam).then(response => {
            if (response.data.result) {
              this.$notify.success({
                title: '提示',
                message: '数据导入成功！'
              });
              this.importNum++
            } else {
              this.$notify.error({
                title: '数据导入失败！',
                message: response.data.msg
              });
            }
          })
        }
        ,getTitleList() {
          let tableListStr = "";
          let tableListArr = [];
          this.fieldList.forEach(item => {
            if (item.title) {
              tableListArr.push(item)
            }
          })
          tableListArr.forEach(item => {
            tableListStr = tableListStr + item.field + "," + item.title + ";"
          })
          return tableListStr;
        }
      }
      ,created() {
        this.tableName = this.$route.query.tableName
        this.initFieldData()
      }
    }
</script>

<style scoped>
  .headerContainer {
    position: fixed;
    background-color:#8c939d;
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    padding-right: 20px;
    height: 50px;
    z-index: 1000;
  }
  .fieldContainer{
    padding-top: 100px;
  }
  .rootContainer{

  }
  .importNumTip {
    font-size: 20px;
    font-weight: bold;
    font-family: 黑体;
  }
</style>
